<template>
  <div class="pagelist">
    <el-tabs v-model="activeName" tab-position="top" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabsList" :key="item.id">
        <div class="headerbox">
          <div class="headerboxLeft">
            <el-form ref="filterForm" v-model="filterForm" inline>
              <el-form-item label="页面类型">
                <el-select v-model="typeValue" v-selectLoadMore="selectLoadMore" clearable placeholder="请选择">
                  <el-option
                    v-for="item in filterForm.pageTypeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="学段">
                <el-select v-model="sectionValue" clearable placeholder="请选择学段">
                  <el-option
                    v-for="item in filterForm.tags"
                    :key="item.code"
                    :label="item.name"
                    :value="item.tagId + '-' + item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="页面名称">
                <el-input v-model="pageFormData.pageName" placeholder="请输入页面名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="serchTable">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="headerboxRight">
            <el-button type="primary" @click="addPageFun((isSet = 0))">新增页面</el-button>
          </div>
        </div>
        <div class="listdata">
          <el-table :data="tableData" stripe style="width: 100%; margin-bottom: 20px">
            <el-table-column prop="id" label="ID"> </el-table-column>
            <el-table-column prop="name" label="页面名称"> </el-table-column>
            <el-table-column prop="aliasName" label="页面标识"> </el-table-column>
            <el-table-column prop="pageTypeName" label="页面类型"> </el-table-column>
            <el-table-column label="当前版本">
              <template slot-scope="scope">
                <el-link type="primary" @click="versionDailg(scope.row)">{{ scope.row.version }}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="section" label="学段"> </el-table-column>
            <el-table-column prop="subject" label="科目"> </el-table-column>
            <el-table-column prop="createName" label="添加人"> </el-table-column>
            <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
            <el-table-column prop="note" label="备注"> </el-table-column>
            <el-table-column prop="statusName" label="发布状态"> </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="toCustomPage(scope.row)">装修</el-button>
                <el-button type="success" size="small" @click="addPageFun(scope.row, (isSet = 1))">编辑</el-button>
                <el-button type="warning" size="small" @click="copyList(scope.row)">复制</el-button>
                <el-button type="info" size="small" @click="deletePage(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :page-size="pageFormData.pageSize"
            :current-page="pageFormData.pageNum"
            @current-change="SetPage"
            @size-change="handleSizeChange">
          </el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!--新增页面-->
    <Addpage
      ref="edit"
      :aDialogFormVisible="aDialogFormVisible"
      :title="title"
      :filterForm="filterForm"
      :pageFormData="pageFormData"
      @editorList="editList">
    </Addpage>
    <!--版本列表-->
    <VersionList ref="version" :tableDialogVisible="tableDialogVisible" @changeShow="showTableDialogVisible"></VersionList>
  </div>
</template>
<script>
import Addpage from "./components/addPage";
import VersionList from "./components/versionList";
import { getSection, getTypeList, getPageList, copyPageList, deletePageList } from "@/api/basisMG";
export default {
  name: "pageList",
  components: {
    Addpage,
    VersionList
  },
  data () {
    return {
      sonDialogVisible: false,
      aDialogFormVisible: false,
      tableDialogVisible: false,
      title: "",
      typeValue: "",
      sectionValue: "",
      pageFormData: {
        appType: "",
        pageType: "",
        tags: "",
        pageNum: 1,
        pageSize: 10,
        pageName: ''
      },
      typeformData: {
        type: 1,
        productType: "",
        pageNum: 1,
        pageSize: 10,
      },
      apptypeformData: {
        type: 0,
        productType: "",
        pageNum: 1,
        pageSize: 20,
      },
      formsecdata: {
        id: "section",
        codes: "",
      },
      filterForm: {
        pageTypeList: [],
        section: [],
        pageNum: 1,
        pageSize: 10
      },
      tableData: [],
      tabsList: [],
      total: 0,
      typeTotal: 0,
      activeName:"student_app"
    };
  },
  created () {
    this.getSectionList();
    this.getTypeList();
    this.getAppTypeList();
    this.allMessPag = sessionStorage.getItem("messagePage");
    if (this.allMessPag != undefined) {
      this.pageFormData.pageNum = Number(this.allMessPag);
    }
  },
  mounted() {
    this.updateType();
  },
  activated(){
    // 缓存的组件点击时调用
   this.getPageList();
  },
  methods: {
    // 下拉加载更多
    selectLoadMore () {
      this.typeformData.pageSize = this.typeformData.pageSize + 1;
      if (this.typeformData.pageSize > this.typeTotal) return
      this.getTypeList()
    },
    updateType () {
      let protype = this.$route.query.protype;
      this.pageFormData.appType = protype;
      this.getPageList();
      if (protype === 'student_app') {
        this.activeName  = 'student_app';
      } else if (protype === 'student_pad') {
        this.activeName  = 'student_pad';
      }else if (protype === 'teacher_app') {
        this.activeName  = 'teacher_app';
      }
    },
    // 分页
    SetPage (e) {
      this.pageFormData.pageNum = e;
      sessionStorage.setItem("messagePage", e);
      this.getPageList();
    },
    handleSizeChange (val) {
      this.pageFormData.pageSize = val;
      this.getPageList();
    },
    handleClick (tab) {
      this.pageFormData.appType = tab.name;
      this.pageFormData.pageNum = 1;
      this.getPageList();
    },
    // 装修跳转
    toCustomPage (e) {
      let subjectCode = "", sectionCode = "";
      if (e.tagValues && e.tagValues[1]) {
        subjectCode = e.tagValues[1].toString().substr(-4);
        sectionCode = e.tagValues[0].toString().substr(-4);
      } else {
        subjectCode = "";
        sectionCode = "";
      }
      if (e.appType === 'student_pad') {
        this.$router.push({
          path: "./pagepadcustom",
          query: {
            id: e.id,
            subjectCode: subjectCode,
            type: e.type,
            appType: "student_pad"
          },
        })
      } else {
        this.$router.push({
          path: "./pagecustom",
          query: {
            id: e.id,
            subjectCode: subjectCode,
            type: e.type,
            appType: this.pageFormData.appType
          }
        });
      }
    },
    serchTable () {
      this.pageFormData.pageType = this.typeValue;
      this.pageFormData.tags = this.sectionValue;
      this.pageFormData.pageNum = 1;
      this.getPageList();
    },
    async getSectionList () {
      const res = await getSection(this.formsecdata);
      this.filterForm.tags = res.data.tagEnumVoList;
    },
    //获取页面类型
    async getTypeList () {
      const res = await getTypeList(this.typeformData);
      if (res.code === '200') {
        this.filterForm.pageTypeList = res.data.content;
        this.typeTotal = res.data.total;
      } else {
        this.filterForm.pageTypeList = [];
      }
    },
    //获取应用类型
    async getAppTypeList () {
      const res = await getTypeList(this.apptypeformData);
      this.tabsList = res.data.content;
      if (this.pageFormData.appType === undefined) {
        this.pageFormData.appType = this.tabsList[0].id;
        this.getPageList();
      }
    },
    // 获取页面列表
    async getPageList () {
      const res = await getPageList(this.pageFormData);
      if (res.data) {
        this.tableData = res.data.content;
        this.total = res.data.total;
      } else {
        this.tableData = [];
      }
    },
    copyList (row) {
      this.$confirm("要复制该页面吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await copyPageList({ id: row.id });
          if (data.code != 200) return this.$message.error("操作失败请稍后重试");
          this.$message({
            type: "success",
            message: "复制成功!",
          });
          this.getPageList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消复制",
          });
        });
    },
    deletePage (id) {
      this.$confirm("确定要删除吗？删除后将无法恢复，请谨慎操作", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const data = await deletePageList({ id: id });
          if (data.code != 200) return this.$message.error(data.message);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getPageList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    versionDailg (data) {
      this.$refs["version"].showVersion(data);
    },
    showTableDialogVisible (data) {
      if (data === "false") {
        this.tableDialogVisible = false;
      } else {
        this.tableDialogVisible = true;
      }
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate (data) {
      if (data === "false") {
        this.sonDialogVisible = false;
      } else {
        this.sonDialogVisible = true;
      }
    },
    addPageFun (row) {
      const rowList = {};
      console.log(this.isSet, 'this.isSet---');
      if (this.isSet == 0) { //点击添加
        rowList.isSet = 0;
      } else { //点击编辑
        rowList.isSet = 1;
        rowList.id = row.id;
        rowList.status = row.status;
      }
      this.$refs["edit"].showEdit(rowList);
    },
    editList (e) {
      this.getPageList();
    },
  },
};
</script>
<style lang="scss">
.pagelist {
  padding: 20px;
  .headerbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
  }
}
</style>
